<template>
  <div>
    <h1>组合式函数</h1>
    <p>x:{{ x }}</p>
    <p>y:{{ y }}</p>
    <hr />
    <p>请选择页面：</p>
    <select v-model="pageIndex">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
    <!-- 显示后端的数据 -->
    <ul v-if="data.length > 0">
      <div>data.length:{{ data.length }}</div>
      <li v-for="item in data">
        <p>item.proname:{{ item.proname }}</p>
      </li>
    </ul>
    <div v-else>加载中……………………</div>
  </div>
</template>

<script setup>

import { computed, ref, watch, watchEffect } from "vue";

import { usePostion, useGetData } from "../../hooks/index.js"


//一、 需求：鼠标在页面上移动，得到鼠标当前的位置（x,y);
let { x, y } = usePostion();


//  二、需求：初次从后端获取数据,只获取一次，以后不需要
// let pageIndex = ref(1);

// let url = "http://121.89.205.189:3001/api/pro/list";
// let params = {
//       count:pageIndex.value,
//       limitNum:10
//     }

// let { data, err } = useGetData(url,params);

// 三、需求：初次需要从后端获取数据，当页码发生变化时，需要重新获取数据

let pageIndex = ref(1);
let url = computed(()=>"http://121.89.205.189:3001/api/pro/list");
let params = computed(()=>{
    return {
      count:pageIndex.value,
      limitNum:10
    }
  }
)

let { data, err } = useGetData(url,params);


</script>

<style scoped>

</style>